// 创建vuex中最核心的store

import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 使用vuex插件，作用：解决共享数据问题，多个组件使用同一资源时候使用，改变同一资源状态
Vue.use(Vuex)

// 准备用于响应组件中的动作
const actions = {
    jia(context, value) {   // value 是接收传过来的 
        console.log('actions中的jia被调用了', context, value);
        context.commit('JIA', value)
    },
    jiaOdd(context, value) {
        if (context.state.sum % 2 == 1) {
            console.log('actions中的jiaOdd被调用了', context, value);
            context.commit('JIA', value)
        }
    },

}
// 准备用于操作数据state
const mutations = {
    // mutations 里面的函数通常大写，方便区分，mutations里面做的事权力大，所以大写
    JIA(state, value) {     // state 是下面的state，value 是接收传过来的 
        console.log('mutations中的JIA被调用了', state, value);
        state.sum += value
    },
    JIAN(state, value) {
        console.log('mutations中的JIAN被调用了', state, value);
        state.sum -= value
    }
}
// 准备用于存储数据，这里是管理数据的
const state = {
    sum: 0,
    school: '尚硅谷',
    subject: '前端',
}
// 准备用于给state中的数据加工
const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}

// 可以在此处管理多个actions，mutations，state，getters，然后在下面声明里定义暴露出来
// const abcOptions = {
//     // 这个要配置
//     namespaced: true,
//     // 这里复制过来actions，mutations，state，getters 的具体内容
// }

// 创建并暴露，上面引入了vuex
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters,

    // 如果上面使用管理多个，这里要标示出来
    // modules: {
    //     abcOptions,
    // }
})

